import React, { useState, useEffect } from'react';
import { Button, Input } from'react-vant';
import { useNavigate } from'react-router-dom';
import { registerList, sendYzmList } from '../request/api';

export default function ZinUserRegister() {
    const [phone, setPhone] = useState('');
    const [passWord, setPassWord] = useState('');
    const [yanzhengma, setYanzhengma] = useState('');
    const [isCodeSent, setIsCodeSent] = useState(false);
    const [errorMessage, setErrorMessage] = useState('');
    const navigate = useNavigate();
    const [isMounted, setIsMounted] = useState(true);

    useEffect(() => {
        return () => {
            setIsMounted(false);
        };
    }, []);

    //发送验证码按钮
    const sendCode = () => {
        if (!phone) {
            alert('请输入手机号');
            return;
        }
        sendYzmList({ phone: phone })
           .then(res => {
                if (res.status === 200) {
                    if (res.data.code === 200) {
                        setIsCodeSent(true);
                        setErrorMessage('');
                        alert('验证码发送，请查收');
                    } else {
                        alert('验证码失败');
                        setErrorMessage(res.data.message);
                        console.log(res.data);
                    }
                } else {
                    alert(`请求失败，状态码: ${res.status}`);
                    setErrorMessage('请求失败，请稍后再试');
                }
            })
           .catch(error => {
                if (isMounted) {
                    alert(`发送验证码请求出错，请稍后再试`);
                    setErrorMessage('发送验证码请求出错，请稍后再试');
                }
            });
    };

    const registerBtn = () => {
        if (!phone ||!passWord ||!yanzhengma) {
            alert('请输入完整的信息');
            return;
        }
        registerList({ phone, passWord: passWord, code: yanzhengma })
           .then(res => {
                if (res.status === 200) {
                    if (res.data.code === 200) {
                        setErrorMessage('');
                        alert("注册成功");
                        navigate('/login');
                    } else {
                        alert(res.data.msg);
                        setErrorMessage(res.data.msg);
                    }
                } else {
                    alert(`请求失败，状态码: ${res.status}`);
                    setErrorMessage('请求失败，请稍后再试');
                }
            })
           .catch(error => {
                if (isMounted) {
                    alert(`注册请求出错，请稍后再试`);
                    setErrorMessage('注册请求出错，请稍后再试');
                }
            });
    };

    return (
        <>
            <div>
                <h2>手机号验证码注册</h2>
                <Input
                    type="text"
                    placeholder="请输入手机号"
                    value={phone}
                    onChange={(e) => {
                        if (isMounted) {
                            setPhone(e); // 修改这里，获取 e.target.value
                        }
                    }}
                />
                <Button onClick={sendCode} disabled={isCodeSent}>
                    {isCodeSent? '验证码已发送' : '发送验证码'}
                </Button>
                {isCodeSent && (
                    <div>
                        <Input
                            type="text"
                            placeholder="请输入验证码"
                            value={yanzhengma}
                            onChange={(e) => {
                                if (isMounted) {
                                    setYanzhengma(e); // 修改这里，获取 e.target.value
                                }
                            }}
                        />
                        <Input
                            type="password"
                            placeholder="请输入密码"
                            value={passWord}
                            onChange={(e) => {
                                if (isMounted) {
                                    setPassWord(e); // 修改这里，获取 e.target.value
                                }
                            }}
                        />
                        <Button onClick={registerBtn}>注册</Button>
                    </div>
                )}
                {errorMessage && <p style={{ color:'red' }}>{errorMessage}</p>}
            </div>
        </>
    );
}